<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>注册</title>
<link rel="stylesheet"
	href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
function checkAll() {
	
	var name = $("#name").val();
	var password = $("#password").val();
	var phone = $("#phone").val();
	var cpassword = $("#cpassword").val();
	var disname = $("#disname").val();
	var email = $("#email").val();
	
	
	if (name.length < 1 || password.length < 1 ||  cpassword != password || phone.length != 11 || cpassword.length < 1 || !email.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
		alert("信息输入错误或不完整");
		return false;
	}else{
		return true;
	
	}

}




function updateClazz(data){

	
	$.ajax({
		type:"GET",
		url:"./User/ajaxGetClazz",
		success:function(data){
			var res = JSON.parse(data)
			for(var i in res.clazz){
				var clazzId = res.clazz[i].clazzId;
				var clazzName = res.clazz[i].clazzName
		 		var k = $("<option value='"+clazzId+"'>"+clazzName+"</option>")
		 		$("#clazzId").append(new Option(clazzName,clazzId));
		 	}
		},
		error:function(data){
		}
	})
	
}



function checkUserName(obj){
	var username =$("#name").val();
	var re =/[`~!@#$%^&*+<>{}\/'[\]]/im;
	if(username == ""){
		return 0;
	}else if(username.match(re)){//用户名不能包含特殊字符 
		return -1;
	}else if(username.length > 18){
		return -2;
	}else{
			$.ajax({
				type:"POST",
				url:"./User/checkUserName",
				dataType:"json",
				contentType:"application/json",
				data:JSON.stringify({username:$("#name").val()}),
				success:function(json){
					if(json.flag){
						alert("用户名已存在");
						$("#name").val("");
					}else{
						return 1;
					}
				}
			})
	}
		return 1;
}

function checkEmail(){
	var email = $("#email").val();
	var re = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
	if(email == ""){
		return 0;
	}else if (!email.match(re)){
		return -1;
	}
	return 1;
}

function checkTel(){
	var tel = $("#tel").val();
	var re = "((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$";
	if(tel == ""){
		return 0;
	}else if (!tel.match(re)){
		return -1;
	}
	return 1;
}
function checkpassword(){
	var password = $("#password").val();
	if(password == "" ){
		return 0;
	}
	return 1;
}

function comfirmpassword(){
	var password = $("#password").val();
	var cpassword = $("#cpassword").val();
	if(cpassword != password){
		return 0;
	}
	return 1;
}
function checkpasswordRepaire(){
	var passwordRepaire = $("#passwordRepaire").val();
	if(passwordRepaire == ""){
		return 0;
	}
	return 1;
}


$(document).ready(function(){

	updateClazz()
	
	$("#name").focus(function(){
		var res = checkUserName();
		if(res == 0 ){
			$("#username_rule").show();
			$("#username_error").hide();
			return false;
		}
	});
	
	$("#name").blur(function(){
		var res = checkUserName();
		$("#username_rule").hide();
		$("#username_error").show();
		if(res > 0){
			$("#username_error").hide();
		}else if(res == 0 ){
			$("#username_error").html("用户名不能为空");
		}else{
			if(res == -1){
				$("#username_error").html("用户名不能包含除_以外特殊字符 ");
		}
			else if(res == -2){
				$("#username_error").html("用户名长度不符 ");
		}	
		}
		return false;
	});
	
	$("#email").focus(function(){
		var res1 = checkEmail();
		if(res1 == 0){
			$("#email_error").hide();
		return false;
		}
	});
	
	$("#email").blur(function(){
		var res1 = checkEmail();
		$("#email_error").show();
		if(res1 > 0){
			$("#email_error").hide();
		}else if(res1 == 0 ){
			$("#email_error").html("邮箱不能为空 ");
			
		}else if(res1 == -1){
			$("#email_error").html("邮箱格式不符");
		}
		return false;
	});
	
	$("#tel").focus(function(){
		var res2 = checkTel();
		if(res2 == 0){
			$("#tel_error").hide();
		return false;
		}
	});
	
	$("#tel").blur(function(){
		var res2 = checkTel();
		$("#tel_error").show();
		if(res2 > 0){
			$("#tel_error").hide();
		}else if(res2 == 0 ){
			$("#tel_error").html("手机号不能为空 ");
			
		}else if(res2 == -1){
			$("#tel_error").html("手机号格式不符");
		}
		return false;
	});
	
	$("#password").focus(function(){
		var res3 = checkpassword();
		if(res3 == 0){
			$("#password_error").hide();
		return false;
		}
	});
	
	$("#password").blur(function(){
		var res3 = checkpassword();
		$("#password_error").show();
		if(res3 > 0){
			$("#password_error").hide();
		}else if(res3 == 0 ){
			$("#password_error").html("密码不能为空 ");
		}
		return false;
	});
	
	$("#cpassword").focus(function(){
		var res4 = comfirmpassword();
		if(res4 == 0){
			$("#cpassword_error").hide();
		return false;
		}
	});
	
	$("#cpassword").blur(function(){
		var res4 = comfirmpassword();
		$("#cpassword_error").show();
		if(res4 > 0){
			$("#cpassword_error").hide();
		}else if(res4 == 0 ){
			$("#cpassword_error").html("两次密码不相同 ");
		}
		return false;
	});
	
	$("#passwordRepaire").focus(function(){
		var res5 = checkpasswordRepaire();
		if(res5 == 0){
			$("#passwordRepaire_error").hide();
		return false;
		}
	});
	
	$("#passwordRepaire").blur(function(){
		var res5 = checkpasswordRepaire();
		$("#passwordRepaire_error").show();
		if(res5 > 0){
			$("#passwordRepaire_error").hide();
		}else if(res5 == 0 ){
			$("#passwordRepaire_error").html("密保密码不能为空 ");
		}
		return false;
	});
// 	$("#checkcode").blur(function (){
// 		     var text=$.trim($("#checkcode").val());  
// 		     $.post("VerificationcodeServlet",{op:text},function(data){  
// 		         data=parseInt($.trim(data));  
// 		         if(data>0){  
// 		             $("#span").text("验证成功!").css("color","green");  
// 		         }else{  
// 		             $("#span").text("验证失败!").css("color","red");  
// 		             reload();  //验证失败后需要更换验证码  
// 		         }  
// 		     });  
		   
// 	});
	
});

// function reload(){  
<%--     document.getElementById("image").src="<%=request.getContextPath() %>/VerificationcodeServlet?date="+new Date().getTime();   --%>
//     $("#checkcode").val("");   // 将验证码清空  
// }   
   
 

	
	

</script>
</head>
<body background="img/Zhuoku060.jpg">

	<div class="container">
		<div class="row text-center  ">
			<div class="col-md-12">
				<br /> <br /> <br />
			</div>
		</div>
		<div class="row">

			<div
				class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
				<div class="panel panel-default">
					<div class="panel-heading">
						<strong>请 输 入 注 册 信 息</strong>
					</div>
					<div class="panel-body ">

						<form id = "f1" enctype="multipart/form-data" onsubmit="return checkAll()" action ="./User/addUser" method = "post">
							<br />
							<div class="form-group input-group">
								<b>用户名</b><br> <input type="text" id = "name"
									name="name" class="form-control" placeholder="请输入用户名" />
							</div>
							<div id = "username_rule">用户名长度小于18位，且不能包含除_以外的特殊字符</div>
							<div class = "error"id = "username_error" style ="color:red"></div>
							
							<div class="form-group input-group">
								<b>真实姓名</b><br> <input type="text" id = "disname"
									name="disname" class="form-control" placeholder="请输入真实姓名" />
							</div>
							<div class="form-group input-group">
								<b>密码</b><br>
								 <input type="password" id = "password"name="password"
									 class="form-control" placeholder="请输入密码" />
							</div>
							<div class = "error"id = "password_error" style ="color:red"></div>
							<div class="form-group input-group">
								<b>确认密码</b><br> <input type="password" id = "cpassword"name="cpassword"
									 class="form-control" placeholder="请确认密码" />
							</div>
							<div class = "error"id = "cpassword_error" style ="color:red"></div>
							<div class="form-group input-group">
								<b>密保密码</b><br> <input type="password" id = "pwdRepaire" name="pwdRepaire"
									class="form-control"
									placeholder="请输入密保密码以用来找回" />
							</div>
							<div class = "error"id = "passwordRepaire_error" style="color:red"></div>							
							<div class="form-group input-group">
								<b>邮箱</b><br> <input type="email" id ="email" name="email"
									class="form-control" placeholder="请输入邮箱" />
							</div>
							<div class = "error" id = "email_error" style ="color:red"></div>
							<div class="form-group input-group">
								<b>手机号</b><br> <input type="number" id = "phone" name="phone"
									 class="form-control" placeholder="请输入手机号" />
							</div>
							<div class = "error" id = "tel_error" style = "color:red"></div>
							<div class="form-group input-group">
								<b>性别</b><br> <label><input name="sex" id = "gender" type="radio"
									value="boy" checked="true" />男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								</label> <label><input name="sex" type="radio" value="girl" />女
								</label>
							</div>
							<div class="form-group input-group">
								<b>班级</b><br> <select name="clazzId" id="clazzId" >
								</select>
							</div>
<!-- 							<div class="form-group input-group"> 
<!-- 								<b>头像(选填)</b><br> 
<!-- 								<div class="form-group"> -->
<!-- 									<input type="file" name="Photo" id="Photo" accept="image/*"> -->
<!-- 								</div> -->
<!-- 							</div> -->
<!-- 							<div> -->
<!-- 								  验证码：<input type="text" name="checkcode"  id="checkcode"/>   -->
<%-- 							    <img  src="<%=request.getContextPath() %>/VerificationcodeServlet" alt="验证码" id="image" />   --%>
<!-- 							    <a href="javascript:reload();"><label>换一张</label></a><br>   -->
<!-- <!-- 							    <input  type="button" value="提交"  onclick="javascript:verificationcode()">   --> 
<!-- 							    <span id="span"></span>   -->
<!-- 							</div> -->
							<button type="submit" id = "b1" a href="index.jsp" class="btn btn-success ">
								注册</a>
							</button>
							已 注 册？ <a href="Login.jsp">点 击 这 里</a>
						</form>
					</div>

				</div>
			</div>


		</div>
	</div>



</body>
</html>
